<template>
  <div class="work-flow">
    <div>
      <div class="design">
        <div class="zoom">
          <Icon
            icon="ant-design:minus-square-outlined"
            size="30"
            @click="changeScale(-state.step)"
          />
          <div>{{ state.zoomVal }}%</div>
          <Icon icon="ant-design:plus-square-outlined" size="30" @click="changeScale(state.step)" />
        </div>
        <div
          class="container"
          :style="{ transform: `scale(${state.zoomVal / 100})`, transformOrigin: '50% 0px 0px' }"
        >
          <NodeWrap v-model:nodeConfig="store.nodeConfig" />
          <div class="end-node">
            <div class="end-node-circle"></div>
            <div class="end-node-text">流程结束</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup name="WorkFlow">
  import { reactive } from 'vue';
  import { Icon } from '/@/components/Icon';
  import NodeWrap from './NodeWrap.vue';
  import { useWorkFlow } from '/@/store/modules/workFlow';
  const store = useWorkFlow();
  const state = reactive({
    // 缩放比例
    zoomVal: 100,
    minZoom: 50,
    maxZoom: 300,
    step: 10,
  });
  const changeScale = (step) => {
    let v = state.zoomVal + step;
    if (v > 40 && v <= 200) {
      state.zoomVal = v;
    }
  };
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
